<template>
	<div class="view">
		<min-popup heightSize="500" :show="show" @close="close"><min-picker :endTime="endTime" :startTime="startTimes" @cancel="cancel" @sure="sure"></min-picker></min-popup>

		<div class="Box">
			<uni-list>
				<view class="list-item">
					<view>
						<text class="active">*</text>
						姓名
					</view>
					<input maxlength="5" v-model="info.name" type="text" :placeholder="info.name" />
				</view>
				<picker @change="sexChange" :value="sexIndex" :range="sexArray">
					<view class="list-item">
						<view>
							<text class="active">*</text>
							性别
						</view>
						<text>{{ sexArray[sexIndex] || info.sex == '1' ? '男' : '女' }}</text>
					</view>
				</picker>

				<view class="list-item" @click="showBox">
					<view>
						<text class="active">*</text>
						出生日期
					</view>
					<text>{{ info.birthDate || '请选择出生日期' }}</text>
				</view>
			</uni-list>
		</div>
		<div class="Box">
			<uni-list>
				<picker @change="heigthChange" :value="heightIndex" :range="heightArray">
					<view class="list-item">
						<text>身高</text>
						<text>{{ info.height || '请选择身高' }}(cm)</text>
					</view>
				</picker>
				<picker @change="WeightChange" :value="WeightIndex" :range="WeightArray">
					<view class="list-item">
						<text>体重</text>
						<text>{{ info.bodyWeight || '请选择体重' }}(kg)</text>
					</view>
				</picker>

				<view class="list-item">
					<text>BMI</text>
					<text>{{ info.bmi }}</text>
				</view>

				<picker @change="bodyChange" :value="bodyIndex" :range="bodyArray">
					<view class="list-item">
						<text>腰围</text>
						<text>{{ bodyArray[bodyIndex] || info.waistline || 0 }}</text>
					</view>
				</picker>

				<picker @change="smokeChange" :value="smokeIndex" :range="smokeArray">
					<view class="list-item">
						<text>吸烟史</text>
						<text>{{ smokeArray[smokeIndex] || '请选择' }}</text>
					</view>
				</picker>

				<picker @change="liquorChange" :value="liquorIndex" :range="smokeArray">
					<view class="list-item">
						<text>喝酒史</text>
						<text>{{ smokeArray[liquorIndex] || '请选择' }}</text>
					</view>
				</picker>
			</uni-list>
		</div>

		<div class="list">
			<div class="item" v-for="(item, index) in list" :key="index">
				<p class="title">{{ item.title }}</p>
				<div class="selectBox">
					<p :class="val.isSelect ? 'select' : 'noselect'" @click="select(index, k)" v-for="(val, k) in item.child" :key="k">{{ val.text }}</p>
				</div>
			</div>
		</div>
		<div class="Btn" @click="save()"><p>保存</p></div>
	</div>
</template>
<script>
import minPopup from '@/components/min-picker/min-popup';
import minPicker from '@/components/min-picker/min-picker';
import { getShowListByUserId, addUserHealth, getUserInfo } from '../../../apis/request.js';
export default {
	components: {
		minPopup,
		minPicker
	},
	data() {
		return {
			list: [],
			show: false,
			columns: [],
			type: '',
			//日期
			startTimes: [1920, 1, 1],
			endTime: new Date().getFullYear(),

			//性别
			sexArray: ['男', '女'],
			sexIndex: -1, //展示用
			//提交参数
			info: {},
			//吸烟喝酒
			smokeArray: ['无历史', '1-3年', '3-6年', '7-9年', '10年以上'],
			//吸烟
			smokeIndex: -1,
			//喝酒
			liquorIndex: -1,
			//身高
			heightArray: [],
			heightIndex: 70,
			//体重
			WeightArray: [],
			WeightIndex: 49,
			//腰围
			bodyArray: [],
			bodyIndex: -1,
			//姓名
			name: ''
		};
	},
	methods: {
		//保存
		save() {
			let arr = [];
			this.list.forEach(item => {
				item.child.forEach(val => {
					if (val.isSelect) {
						arr.push({
							dataHeader: item.title,
							dataValue: val.text,
							id: val.id
						});
					}
				});
			});
			const value = this.info;
			const param = {
				...value,
				healthDataAddDtoList: arr
			};
			if (!this.info.name) {
				this.$dialog('提示', '请输入姓名');
				return;
			}
			if (!this.info.sex) {
				this.$dialog('提示', '请选择性别');
				return;
			}
			if (!this.info.birthDate) {
				this.$dialog('提示', '请选择出生日期');
				return;
			}
			addUserHealth({
				...param
			}).then(res => {
				this.$dialog('提示', '修改成功').then(async () => {
					const info = await getUserInfo();
					uni.setStorageSync('userInfo', info);
					uni.navigateBack({
						delta: 1
					});
				});
			});
		},
		async get() {
			//选项(0单选 1多选) ,改变与自己定义的一致
			var data = await getShowListByUserId({});
			var arr = [];
			arr = data.map(item => {
				var obj = {
					title: item.name,
					type: item.multipleChoice == 0 ? 1 : 2
				};
				var child = [];
				child.push(
					...item.healthDataInfoList.map(val => {
						return {
							id: val.id,
							text: val.dataValue,
							isSelect: false
						};
					})
				);
				obj.child = child;
				return obj;
			});
			data.forEach(element => {
				if (element.userHealthDataInfoList) {
					element.userHealthDataInfoList.forEach(val => {
						arr.forEach(el => {
							el.child.forEach(e => {
								if (val.id == e.id) {
									e.isSelect = true;
								}
							});
						});
					});
				}
			});
			this.list = arr;
		},
		//标签选择
		select(index, k) {
			console.log(index, k);
			if (this.list[index].type == 1 || this.list[index].child[k].text == '暂无') {
				this.list[index].child.map(item => {
					item.isSelect = false;
				});
				this.list[index].child[k].isSelect = true;
			} else {
				this.list[index].child[k].isSelect = !this.list[index].child[k].isSelect;
			}
		},
		//出生日期-打开
		showBox() {
			this.show = true;
		},
		// 出生日期-取消事件
		cancel() {
			this.close();
		},
		// 出生日期-确认事件
		sure(e) {
			this.info.birthDate = `${e.a}-${e.b}-${e.c}`;
		},
		// 出生日期-关闭picker
		close() {
			this.show = false;
		},
		//性别
		sexChange(e) {
			this.sexIndex = e.detail.value;
			this.info.sex = e.detail.value + 1;
		},
		//身高
		heigthChange(e) {
			this.info.height = parseInt(this.heightArray[e.detail.value]);
			if (this.info.height && this.info.bodyWeight) {
				// BMI=体重（千克）除以身高（米）的平方
				this.info.bmi = (this.info.bodyWeight / Math.pow(this.info.height / 100, 2)).toFixed(2);
			}
		},
		//体重
		WeightChange(e) {
			this.info.bodyWeight = parseInt(this.WeightArray[e.detail.value]);
			if (this.info.height && this.info.bodyWeight) {
				// BMI=体重（千克）除以身高（米）的平方
				this.info.bmi = (this.info.bodyWeight / Math.pow(this.info.height / 100, 2)).toFixed(2);
			}
		},
		//腰围
		bodyChange(e) {
			this.bodyIndex = e.detail.value;
			this.info.waistline = parseInt(this.bodyArray[e.detail.value]);
		},
		//烟
		smokeChange(e) {
			this.smokeIndex = e.detail.value;
			this.info.smokingHistory = e.detail.value;
		},
		//酒
		liquorChange(e) {
			this.liquorIndex = e.detail.value;
			this.info.drinkingHistory = e.detail.value;
		},
		onConfirm(e) {
			console.log(e);
			// 1性别,2腰围,3吸烟史，4喝酒史,5出生，6身高，7体重
			const { text, id } = e.mp.detail.value;
			if (this.type == 1) {
				this.info.sex = text;
			} else if (this.type == 2) {
				this.info.waistline = parseInt(text);
			} else if (this.type == 3 || this.type == 4) {
				if (this.type == 3) {
					this.info.smokingHistory = id;
				} else {
					this.info.drinkingHistory = id;
				}
			} else if (this.type == 6) {
				this.info.height = parseInt(text);
			} else if (this.type == 7) {
				this.info.bodyWeight = parseInt(text);
			}
			this.show = false;
		},
		getNumber(min, max, unit) {
			let arr = [];
			for (let index = min; index < max; index++) {
				arr.push(index + unit);
			}
			return arr;
		},
		//初始化数据
		initParams() {
			this.heightArray = this.getNumber(30, 220, 'cm');
			this.WeightArray = this.getNumber(1, 150, 'kg');
			this.bodyArray = this.getNumber(30, 120, 'cm');
		}
	},
	onLoad() {
		this.get();
		this.initParams();
		const { name, sex, smokingHistory, height, birthDate, bodyWeight, bmi, drinkingHistory, waistline } = uni.getStorageSync('userInfo');
		this.info = {
			name,
			sex,
			smokingHistory,
			height,
			birthDate,
			bodyWeight,
			bmi: bmi || 0,
			drinkingHistory,
			waistline
		};
		this.liquorIndex = drinkingHistory;
		this.smokeIndex = smokingHistory;
	}
};
</script>
<style lang="scss" scoped>
.view {
	width: 100%;
	background-color: #f1efef;
	.active {
		color: #ee0000;
		margin-right: 4rpx;
	}
	.Box {
		margin-bottom: 30rpx;

		.list-item {
			box-sizing: border-box;
			padding: 25rpx;
			border: 1rpx solid #f1f1f1;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			text-align: right;
		}
	}

	input {
		border: none;
	}

	.list {
		.item {
			background-color: #ffffff;
			padding: 30rpx;
			border-bottom: 1rpx solid #f1f1f1;

			.title {
				font-size: 35rpx;
				margin-bottom: 35rpx;
			}

			.selectBox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				p {
					padding: 5rpx 15rpx;
					font-size: 28rpx;
					border-radius: 29rpx;
					margin-right: 20rpx;
					margin-bottom: 30rpx;
				}

				.select {
					color: #ffffff;
					background-color: #32C59A;
				}

				.noselect {
					color: #333333;
					background-color: #f1efef;
				}
			}
		}
	}

	.Btn {
		text-align: center;
		margin: 30rpx;

		p {
			background: #32C59A;
			border-radius: 51rpx;
			font-size: 35rpx;
			color: #ffffff;
			width: 574rpx;
			height: 90rpx;
			margin: auto;
			line-height: 90rpx;
		}
	}
}
</style>
